<script setup lang="ts">
import { ref } from "vue";
import "plus-pro-components/es/components/search/style/css";
import { type PlusColumn, PlusSearch } from "plus-pro-components";
import { ProcurementForm } from "@/api/procurement/type/procurementForm";
import { getToken } from "@/utils/auth";
import { ArrowDown, ArrowUp } from "@element-plus/icons-vue";
// 定义emits
const emits = defineEmits(["search", "addItem"]);
// 表单载荷
const state = ref<ProcurementForm>({
  arrivalId: null, // 到货方式
  code: "", // 到货单号
  endTime: null, // 结束时间
  pickUpCarId: null, // 取货车辆ID
  startTime: null, // 开始时间 时间戳
  statusFlag: " ", // 订单状态 1草稿状态 2待入库 3已完成 4存档 5驳回 6已结算 ,
  supplierId: null //供应商id
});
// 搜索栏
const columns: PlusColumn[] = [
  /// 状态
  {
    label: "状态",
    prop: "statusFlag",
    valueType: "select",
    options: [
      {
        label: "全部",
        value: " ",
        color: "red"
      },
      {
        label: "草稿",
        value: "1",
        color: "blue"
      },
      {
        label: "待入库",
        value: "2",
        color: "yellow"
      },
      {
        label: "已完成",
        value: "3",
        color: "red"
      },
      {
        label: "存档",
        value: "4",
        color: "red"
      },
      {
        label: "驳回",
        value: "5",
        color: "red"
      },
      {
        label: "已结算",
        value: "6",
        color: "red"
      }
    ]
  },
  {
    label: "单号",
    prop: "code",
    valueType: "copy",
    tooltip: "单号提示信息"
  },

  /// 提货车牌
  {
    label: "提货车牌",
    prop: "pickUpCarId",
    valueType: "select",
    options: [
      {
        label: "全部",
        value: 0,
        color: "red"
      },
      {
        label: "叉车",
        value: 1,
        color: "red"
      },
      {
        label: "鄂AOUJ02",
        value: 2,
        color: "blue"
      },
      {
        label: "鄂A6588V",
        value: 3,
        color: "yellow"
      },
      {
        label: "鄂AA7062",
        value: 4,
        color: "red"
      },
      {
        label: "鄂A200Z5",
        value: 5,
        color: "red"
      }
    ]
  },
  // 到货方式
  {
    label: "到货方式",
    prop: "arrivalId",
    valueType: "select",
    options: [
      {
        label: "全部",
        value: 0,
        color: "red"
      },
      {
        label: "自提",
        value: 111,
        color: "red"
      },
      {
        label: "送货",
        value: 112,
        color: "blue"
      },
      {
        label: "物流送货",
        value: 113,
        color: "yellow"
      }
    ]
  },
  // 开单日期
  {
    label: "开始日期",
    prop: "startTime",
    valueType: "date-picker",
    fieldProps: {
      type: "date",
      startPlaceholder: "请选择",
      format: "YYYY-MM-DD",
      valueFormat: "x"
    }
  },
  // 结束日期
  {
    label: "结束日期",
    prop: "endTime",
    valueType: "date-picker",
    fieldProps: {
      type: "date",
      startPlaceholder: "请选择",
      format: "YYYY-MM-DD",
      valueFormat: "x"
    }
  }
];

const handleChange = (values: any) => {
  console.log(values, "change");
};
const addItem = () => {
  // 触发父组件的新增事件
  emits("addItem");
};
const handleSearch = (values: any) => {
  // 触发父组件的搜索事件
  emits("search", values);
};
// 重置表单
const handleRest = () => {
  console.log("handleRest");
  state.value = {
    arrivalId: null, // 到货方式
    code: "", // 到货单号
    endTime: null, // 结束时间
    pickUpCarId: null, // 取货车辆ID
    startTime: null, // 开始时间 时间戳
    statusFlag: null, // 订单状态 1草稿状态 2待入库 3已完成 4存档 5驳回 6已结算 ,
    supplierId: null //供应商id
  };
  // 触发父组件的搜索事件（使用空参数）
  emits("search", state.value);
};
</script>

<template>
  <PlusSearch
    v-model="state"
    :columns="columns"
    :show-number="2"
    label-width="80"
    label-position="right"
    @change="handleChange"
    @search="handleSearch"
    @reset="handleRest"
  >
    <template
      #footer="{ handleReset, handleSearch, handleUnfold, isShowUnfold }"
    >
      <!-- 这里放置你要添加的按钮 -->
      <el-button type="primary" @click="addItem">新增</el-button>
      <el-button type="primary" @click="handleSearch">查询</el-button>
      <el-button type="default" @click="handleReset">重置</el-button>
      <!-- 手动添加展开/折叠按钮 -->
      <el-button
        :icon="isShowUnfold ? ArrowUp : ArrowDown"
        @click="handleUnfold"
      >
        {{ isShowUnfold ? "收起" : "展开" }}
      </el-button>
    </template>
  </PlusSearch>
</template>
